// 引入自定义 Hooks 
import { useId } from "../hooks/fpHooks/index";

import { Popconfirm, message } from 'antd';
import { UserDeleteOutlined, SelectOutlined } from '@ant-design/icons';
import FpRouter from "./navrouter/FpRouter";
import LhqRouter from "./navrouter/LhqRouter";
import LkRouter from "./navrouter/LkRouter";
import LmdRouter from "./navrouter/LmdRouter";
import ZwRouter from "./navrouter/ZwRouter";

import '../scss/fp/index.scss'
import React, { useEffect, useState } from 'react';
import { Layout } from 'antd';
import { Outlet, useNavigate } from 'react-router-dom';
const { Header, Footer, Sider, Content } = Layout;


function Index(props) {

    // 引入自定义 Hooks 
    var [id, setId] = useId('')



    var push = useNavigate();
    // 点击退出登录
    const tuichuLogin = () => {
        //-----🍌---🍌---🍌-----
        localStorage.clear()
        push('/login')
        message.open({ type: 'success', content: '成功退出系统!' });
    }

    const goMytext = () => {
        //-----🍌---🍌---🍌-----
        push('/index/mine_message')

    }

    return (
        <div className='index'>

            <Layout>
                <Header className='header'>
                    <div className="header_left">
                        <h1>ERP 管理系统</h1>
                    </div>
                    <div className="header_right">
                        <div className="right_left">
                            <i onClick={goMytext}><UserDeleteOutlined /></i>
                            <span>ID : {id}</span>
                        </div>
                        <div className="right_right">
                            <i><SelectOutlined /></i>

                            <Popconfirm onConfirm={tuichuLogin} title="确认退出吗？" okText="Yes" cancelText="No">
                                <button>退出系统</button>
                            </Popconfirm>
                        </div>
                    </div>
                </Header>
                <Layout>
                    <Sider className='navleft' >

                        <LkRouter></LkRouter>
                        <FpRouter></FpRouter>
                        <LhqRouter></LhqRouter>
                        <LmdRouter></LmdRouter>
                        <ZwRouter></ZwRouter>

                    </Sider>
                    <Content className='main' style={{ margin: '20px 30px' }}>
                        {/* 三级路由渲染出口 */}
                        <Outlet></Outlet>
                    </Content>
                </Layout>
            </Layout>

        </div>
    );
}

export default Index;